<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">拼团列表</block>
			<block slot="right">
				<view class="cuIcon cuIcon-info default margin-right" @tap="modalName='Modal'"></view>
			</block>
		</cu-custom>
		<view v-for="(wholesale, i) in list" :key="i" class="margin-top">
			<wholesaleView :value="wholesale" :stype="'list2'"></wholesaleView>
		</view>
		<view class="cu-load margin-center" :class="loading?'loading':'over'"></view>

		<view class="cu-modal" :class="modalName=='Modal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" @tap.stop=''>
				<view class="cu-bar bg-white justify-end">
					<view class="content">规则说明</view>
					<view class="action" @tap="modalName=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white text-left">
					<view>
						1. 选择心仪的产品支付相应的价格开团或者参团，分享给好友；
					</view>
					<view>
						2. 人数一满立即开奖，随机抽取一名中奖用户；
					</view>
					<view>
						3、中奖用户可获得产品，未中奖全额退款并赠送对应奖励;
					</view>
					<view>
						4、中奖信息可在个人中心-拼购管理中查看;
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wholesaleView from '@/components/shop/wholesaleView.vue'
	export default {
		components: {
			wholesaleView
		},
		data() {
			return {
				list: [],
				hasMore: true,
				loading: false,
				page: 1,
				modalName: '',
				cate_id: 0,
			};
		},
		filters: {},
		onLoad(options) {
			if (options.cate_id) {
				this.cate_id = options.cate_id
			}
			this.getList()
		},
		methods: {
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					this.$http
						.get('marketing_wholesale_index', {
							page: this.page,
							cate_id: this.cate_id
						})
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								if (list.length > 0)
									list = list.concat(response.data.data)
								else list = response.data.data
								this.list = list
							} else {
								this.hasMore = false
							}
							this.page += 1
							this.loading = false
							console.log(this.allList)
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							this.allList[index].loading = false
							uni.stopPullDownRefresh()
						})
				}
			},
		},
		onReachBottom() {
			this.getList()
		},
		onPullDownRefresh() {
			this.list = []
			this.hasMore = true
			this.loading = false
			this.page = 1
			this.getList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/marketing/wholesale_list'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-拼团列表',
				imageUrl: '',
				path: path
			}
		},
	}
</script>

<style>
	.VerticalNav.nav {
		width: 200upx;
		min-width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f2f2f2;
		margin: 0;
		border: none;
		position: relative;
		padding: 25rpx 0;
		height: unset;
		line-height: 40rpx;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #FFFFFF;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 0 10upx 10upx 0;
		position: absolute;
		background-color: currentColor;
		top: 0;
		left: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		flex: 1;
	}
</style>
